<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: skyblue;
        }

        .main {
            width: 700px;
            margin: auto;
            text-align: center;
        }

        #star,
        #close {
            width: 100px;
            height: 40px;
            font-size: large;
            text-align: center;
            margin: 5px;
        }

        #dv {
            width: 700px;
            height: 500px;
            background-color: rgb(15, 15, 86);
            margin: 10px;
            position: relative;
        }

        span {
            position: absolute;
            display: none;
            font-size: 30px;

        }
    </style>
</head>

<body>
    <div class="main">
        <h1>点亮星星</h1>
        <input type="button" id="star" value="⭐亮起来">
        <input type="button" id="close" value="🛑停止">
        <div id="dv"><span>⭐</span></div>
    </div>

</body>
<script>
    let times; //定时器
    //点亮星星事件
    document.getElementById('star').onclick = function () {
        times = setInterval(function () {
            let star = document.getElementById('dv').querySelector('span');
            let leftNum = getRndInteger(0, 660) + 'px';
            let topNum = getRndInteger(0, 460) + 'px';
            star.style.display = 'block';
            star.style.left = leftNum;
            star.style.top = topNum;
        }, 200)
    }

    //星星消失事件
    document.getElementById('close').onclick = function () {
        clearInterval(times);
    }



    //随机获取 min（包含）～ max（包含）之间的数字
    function getRndInteger(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
</script>

</html>